let count = 0;
const minus = document.querySelector(".minus")
const plus = document.querySelector(".plus")
const number = document.querySelector(".number")

minus.addEventListener("click", () => updateNumber(-1))
plus.addEventListener("click", () => updateNumber(1))


function updateNumber(value){
    let temp = count + value
    if(temp < 0 || temp > 99){
        return
    }
    let a = number.querySelector('.fadeOutUp')
    if(a){
        a.remove()
    }
    let b = number.querySelector('.fadeOutDown')
    if(b){
        b.remove()
    }
    let span = number.querySelector("span")
    
    count = temp;
    let newSpan = document.createElement('span')
    if(value > 0){
        span.className = 'fadeOutUp'
        newSpan.className = 'fadeInUp'
    }else{
        span.className = 'fadeOutDown'
        newSpan.className = 'fadeInDown'
    }
    newSpan.innerText = `${count}`
    number.append(newSpan)
}